<template>
    <div class="tree-item" :class="expandClass">
        <div class="tree-toggle" :class="selectedClass" @click.stop="handleSelect" @mouseleave="handleLeave">
            <span class="tree-icon" :class="arrowClass" @click.stop="handleExpand(model)"></span>
            <span class="tree-label">{{model[labelKey]}}
                <em v-if="countKey">({{model[countKey]}}人)</em>
            </span>
            <template v-if="!downdropKey">
                <div class="tree-dropdown" :class="dropdownClass" v-if="dropdownArray&&dropdownArray.length">
                    <span class="tree-arrow" @click.stop="dropdownExpand(model)"></span>
                    <ul class="dropdown-menu">
                        <li v-for="(item,index) in dropdownArray" :key="index" @click.stop="dropdownClick(index)" v-if="item">
                            <span>{{item}}</span>
                        </li>
                    </ul>
                </div>
            </template>
            <template v-else>
                <div class="tree-dropdown" :class="dropdownClass" v-if="(dropdownArray&&dropdownArray.length)&&model[downdropKey]!=2">
                    <span class="tree-arrow" @click.stop="dropdownExpand(model)"></span>
                    <ul class="dropdown-menu">
                        <li v-for="(item,index) in dropdownArray" :key="index" @click.stop="dropdownClick(index)" v-if="item">
                            <span>{{item}}</span>
                        </li>
                    </ul>
                </div>
            </template>
        </div>
        <div class="tree-children" v-show="isHasChild">
            <tree-item v-for="model in model.childs" :key="model.nodeKey" :model="model"></tree-item>
        </div>
    </div>
</template>
<script>
    import Emitter from '@/mixins/emitter';
    export default {
        name: 'TreeItem',
        mixins: [Emitter],
        props: {
            model: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        data: function () {
            return {
                open: false
            }
        },
        mounted() {
            this.$on('on-update-selected', (model) => {
                this.model.selected = model.selected;
            });
            this.$on('on-update-expand', (model) => {
                this.model.expand = model.expand;
            });
        },
        computed: {
            // tree每项操作按钮值
            dropdownArray() {
                return this.$store.state.system.dropdownArray
            },
            labelKey() {
                let _key = 'deptName'
                return _key
            },
            countKey() {
                let _key = 'personCount'
                return _key
            },
            downdropKey() {
                let _key = 'sourceType'
                return _key
            },
            isHasChild() {
                return this.model.childs && this.model.childs.length
            },
            expandClass() {
                return {
                    'tree-open': this.model.expand
                }
            },
            selectedClass() {
                return {
                    'tree-selected': this.model.selected
                }
            },
            arrowClass() {
                return {
                    'tree-visible': !this.model.childs
                }
            },
            dropdownClass() {
                return {
                    'dropdown-open': this.model.dropdownShow
                }
            }
        },
        methods: {
            handleSelect() {
                if (this.model.disabled) return;
                this.$set(this.model, 'selected', !this.model.selected);
                this.dispatch('TreeView', 'selected', this.model);
            },
            handleExpand() {
                if (this.model.disabled) return;
                // if (this.isHasChild) {
                this.$set(this.model, 'expand', !this.model.expand);
                if (this.model.expand) {
                    this.dispatch('TreeView', 'toggle-expand', this.model);
                }
                // }
            },
            handleLeave() {
                this.$set(this.model, 'dropdownShow', false);
            },
            dropdownExpand() {
                if (this.model.disabled) return;
                this.$set(this.model, 'dropdownShow', !this.model.dropdownShow);
                this.dispatch('TreeView', 'dropdown-expand', this.model);
            },
            dropdownClick(index) {
                if (this.model.disabled) return;
                this.dispatch('TreeView', 'dropdown-click', index);
            }
        }
    }
</script>
<style lang="less">
    .treeview {
        cursor: pointer;
        .tree-item {
            line-height: 30px;
            white-space: nowrap;
        }
        .tree-toggle {
            position: relative;
            padding: 0 10px;
            height: 30px;
            cursor: pointer;
            text-overflow: ellipsis;
            &:hover {
                .tree-dropdown {
                    display: inline-block;
                }
            }
        }
        .tree-children {
            display: none;
            >.tree-item {
                padding-left: 16px;
            }
        }
        .tree-icon {
            display: inline-block;
            width: 15px;
            height: 15px;
            cursor: pointer;
            vertical-align: middle;
            &::before {
                content: '';
                display: block;
                width: 0;
                height: 0;
                margin: 4px 0 0 3px;
                border: 6px solid transparent;
                border-top-color: #666;
                transform: rotate(0deg);
            }
        }
        .tree-visible {
            visibility: hidden;
        }
        .tree-label {
            display: inline-block;
            em {
                font-style: normal;
                font-size: 12px;
            }
        }
    }

    .tree-open {
        >.tree-children {
            display: block;
        }
        >.tree-toggle {
            >.tree-icon {
                &::before {
                    margin-top: -3px;
                    transform: rotate(180deg);
                }
            }
        }
    }

    .tree-dropdown {
        position: absolute;
        top: 0;
        right: 10px;
        display: none;
        .tree-arrow {
            display: inline-block;
            width: 18px;
            height: 18px;
            cursor: pointer;
            vertical-align: middle;
            background-color: #fff;
            border: 1px solid #99caef;
            border-radius: 2px;
            &::before {
                content: '';
                display: block;
                width: 0;
                height: 0;
                margin: 6px 0 0 3px;
                border: 5px solid transparent;
                border-top-color: #A8B1C1;
                transform: rotate(0deg);
            }
        }
        .dropdown-menu {
            position: absolute;
            top: 25px;
            right: 0;
            z-index: 2;
            display: none;
            width: 100px;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
            li {
                padding: 3px 5px 3px 10px;
                &:hover {
                    background-color: #f2f2f2;
                }
            }
        }
        &.dropdown-open {
            .dropdown-menu {
                display: block;
            }
            .tree-arrow {
                &::before {
                    margin-top: 0;
                    transform: rotate(180deg);
                }
            }
        }
    }

    .tree-selected {
        .tree-label {
            color: #20a1ff;
        }
        .tree-dropdown {
            display: block;
        }
    }
</style>